<template>
  <el-dialog title="脚本查看" :visible.sync="visible" width="90%">
    <editor v-model="scriptDetailArea" :lang="lang" theme="chrome" width="100%" height="400px" @init="editorInit" />
  </el-dialog>
</template>

<script>
import { detail } from '@/api/perf/script.js'
export default {
  components: {
    editor: require('vue2-ace-editor')
  },
  data() {
    return {
      visible: false,
      lang: 'xml',
      id: '',
      scriptDetailArea: 'scriptDetailArea' // taexarea内容
    }
  },
  methods: {
    init(id) {
      this.visible = true
      this.id = id
      this.viewscriptDetail()
    },
    editorInit(ed) {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/theme/chrome')
      // language
      require('brace/mode/xml')
      require('brace/mode/javascript')
      require('brace/mode/less')
      require('brace/mode/java')
      require('brace/mode/scala')
      require('brace/mode/html')
      // snippet
      require('brace/snippets/xml')
      require('brace/snippets/javascript')
      require('brace/snippets/less')
      require('brace/snippets/java')
      require('brace/snippets/scala')
      require('brace/snippets/html')
      ed.setReadOnly(true)
    },
    // 查询脚本详情
    viewscriptDetail() {
      detail(this.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.lang = data.format
          this.scriptDetailArea = data.content
        } else {
          this.$message.error(respnose.message)
          this.scriptDetailArea = '查询出现异常'
        }
      })
    },
    // 模态框关闭判断
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style>
</style>
